<template>
  <div class="demandDetails">
    <div class="demandDetailsBox">
      <div class="demandDetailsHead">
        <p class="line20 fontBold content3 color1">
          <span
            class="you"
            v-if="data.is_quality"
          >优</span>
          <van-tag
            style="height:18px;width:42px;justify-content: center;"
            color="#FF7A1F"
            class="tagleft"
            type="primary"
          >
            {{ data.type }}
          </van-tag>
          {{ data.title }}
        </p>
        <p class="newsT">
          <span>需求量:</span><span class="line20 fontB400 content3 color3 ">{{ data.num > 0 ? data.num : '' }}</span>
        </p>
        <p class="newsT">
          <span>需求地:</span><span class="line20 fontB400 content3 color3 ">{{ data.address }}</span>
        </p>
        <p class="newsT">
          <span>截止时间:</span><span class="line20 fontB400 content3 color3 ">{{ data.expire_time }}</span>
        </p>
        <p
          class="line20 fontB400 content3 color3 demandDetailsBoxText"
          v-html="data.desc"
        />
        <div class="flex align_center demandDetailsBoxImg">
          <img
            v-for="(item,index) in data.morepic"
            :key="index"
            :src="item"
            @click="previewImg(index)"
          >
        </div>
        <p class="fontB400 content2 color6">
          {{ data.create_time }}
        </p>
      </div>
    </div>
    <!-- 对接人显示 -->
    <div
      class="docking"
      v-if="data.is_docking === 1 && data.user"
    >
      <div class="dockingBox flex align_center justify_between">
        <div class="docking_left">
          <div class="flex align_center">
            <div>
              <img :src="data.user.head_img">
            </div>
            <div>
              <p class="contenr3 fontBold color1">
                {{ data.user.username }}
              </p>
              <p class="content3 font400 color3">
                {{ data.user.company }}
              </p>
            </div>
          </div>
        </div>
        <div class="docking_lright">
          <svg
            class="icon"
            aria-hidden="true"
            @click="phone(data.user.phone)"
            v-if="data.user.is_friend === 1"
          >
            <use xlink:href="#icon-dianhua" />
          </svg>
          <svg
            class="icon"
            aria-hidden="true"
            @click="addUser(data.user.id)"
            v-if="data.user.is_friend === 0"
          >
            <use xlink:href="#icon-jiaohuanmingpian" />
          </svg>
        </div>
      </div>
    </div>
    <!-- 发布人显示 -->
    <div
      class="publisher flex align_center justify_between"
      v-if="data.is_publisher == 1 && data.status > 0"
    >
      <div
        class="publisher_item"
        @click="DockingDialog = true"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-chakanduijieren" />
        </svg>
        <p
          class="content3 color3 font400"
        >
          查看对接人
        </p>
      </div>
      <div
        class="publisher_item"
        @click="editDemand"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-xiugaixuqiu" />
        </svg>
        <p
          class="content3 color3 font400"
        >
          修改需求
        </p>
      </div>
      <div
        class="publisher_item"
        @click="solveClick"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-jieshuxuqiu" />
        </svg>
        <p
          class="content3 color3 font400"
        >
          结束需求
        </p>
      </div>
    </div>
    <!-- 内容 -->
    <div
      class="docking_user"
      v-for="(item, index) in replyListData"
      :key="index"
      v-show="data.is_docking == 1 || data.is_publisher == 1"
    >
      <div class="docking_item">
        <div class="docking_img">
          <img
            @click="path(item.user_id)"
            :src="item.user_img"
          >
        </div>
        <div class="docking_info">
          <p class="name">
            <span class="contenr3 fontBold color1">{{ item.user_name }}</span>
            <!-- EE762A 4F78EC-->
            <van-tag
              size="medium"
              color="#EE762A"
              style="margin-left:5px;"
              v-if="item.user_type"
            >
              {{ item.user_type }}
            </van-tag>
          </p>
          <p
            class="desc content3 font400 color3 line20"
            v-html="item.content"
            v-if="item.type === 1"
          />
          <div
            class="file"
            @click="geturl(index)"
            v-if="item.type == 4"
          >
            <a class="teld_btn btnColor">
              <span class="content2 font400 color3 van-ellipsis">{{ item.file_name }}</span>
              <i class="iconfont icon-dingdanzhongxin" />
            </a>
          </div>
          <div
            class="fileItem"
            v-if="item.type === 2"
          >
            <img
              @click="getHfurl(index)"
              :src="item.file"
            >
          </div>
          <div
            class="fileItem"
            v-if="item.type === 3"
          >
            <video
              class="video"
              controls
              :src="item.file"
              ref="video"
            />
          </div>
          <div class="reply">
            <p class="content2 font400 color6">
              {{ item.create_time }}
            </p>
            <p
              @click="userReply(item.id)"
              v-if="data.is_publisher == 1 && data.status == 1 || data.status == 1 && data.is_docking == 1 "
            >
              <i class="iconfont icon-huifu reply_icon" />
              <span class="reply_text">回复</span>
            </p>
          </div>
          <!-- 回复 -->
          <div class="reply_info">
            <div
              class="reply_info_item"
              v-for="(s, r) in item.reply"
              :key="r"
            >
              <div class="reply_info_item_head">
                <div>
                  <img
                    @click="path(s.user_id)"
                    :src="s.head_img"
                  >
                </div>
                <div class="left">
                  <p>
                    <span class="name contenr3 fontBold color1">{{ s.username }}</span>
                    <van-tag
                      v-if="s.user_type == '发布人'"
                      size="medium"
                      color="#EE762A"
                    >
                      发布人
                    </van-tag>
                  </p>
                  <!-- <p
                    class="desc content3 font400 color3 line20"
                    v-html="s.content"
                  /> -->
                  <p
                    class="desc content3 font400 color3 line20"
                    v-html="s.content"
                    v-if="s.type === 1"
                  />
                  <div
                    class="file"
                    v-if="s.type == 4"
                    @click="geturl(index)"
                  >
                    <a class="teld_btn btnColor">
                      <span class="content2 font400 color3 van-ellipsis">{{ item.file }}</span>
                      <i class="iconfont icon-dingdanzhongxin" />
                    </a>
                  </div>
                  <div
                    class="fileItem"
                    v-if="s.type === 2"
                  >
                    <img
                      @click="getHfurl2(index,r)"
                      :src="s.file"
                    >
                  </div>
                  <div
                    class="fileItem"
                    v-if="s.type === 3"
                  >
                    <video
                      class="video"
                      controls
                      :src="s.file"
                      ref="video"
                    />
                  </div>
                  <div class="reply">
                    <p class="content2 font400 color6">
                      {{ item.create_time }}
                    </p>
                    <p
                      @click="userReply(item.id)"
                      v-if="data.is_publisher == 1 && data.status == 1 || data.status == 1 && data.is_docking == 1 "
                    >
                      <i class="iconfont icon-huifu reply_icon" />
                      <span class="reply_text">回复</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    class="fexd_footer"
    v-if="data.status == 1"
  >
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        class="font400 content3 color4"
        @click="share"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fenxiang" />
        </svg>
        <p class="content2 font400 color3">
          分享
        </p>
      </div>
      <div
        @click="submit"
        v-if="(data.is_docking == -1 || data.is_docking == 0 ) && data.is_publisher == 0"
        class="agree font400 content3 color4"
      >
        申请对接
      </div>
      <div
        @click="leaving"
        v-if="data.is_docking == 1 || data.is_publisher == 1"
        class="agree font400 content3 color4"
      >
        留言
      </div>
    </div>
  </div>
  <div
    class="complaint flex flex_column justify_center align_center"
    @click="complaint"
    v-if="data.status === 1 && data.is_publisher === 2"
  >
    <svg
      class="icon"
      aria-hidden="true"
    >
      <use xlink:href="#icon-tousu" />
    </svg>
    <p class="content2 font400 color6">
      投诉需求
    </p>
  </div>
  <!-- 申请对接 -->
  <van-dialog
    v-model:show="show"
    title="请输入对接申请信息"
    show-cancel-button
    confirm-button-color="#FF7A1F"
    confirm-button-text="申请提交"
    @confirm="confirm"
  >
    <div class="Scan">
      <van-field
        v-model="content"
        type="textarea"
        :autosize="{ minHeight: 120 }"
        placeholder="请输入申请提示内容"
      />
    </div>
  </van-dialog>
  <!-- 回复 -->
  <van-popup
    v-model:show="showPopup"
    round
    position="bottom"
  >
    <div class="sendBox">
      <div class="flex align_center justify_between">
        <div class="sendBox_item">
          <van-uploader :after-read="afterRead">
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-zhaopian" />
            </svg>
            <p class="content3 color3 font400">
              照片
            </p>
          </van-uploader>
        </div>
        <div class="sendBox_item">
          <van-uploader
            :after-read="afterReadVideo"
            accept="video/*"
          >
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-shipin" />
            </svg>
            <p class="content3 color3 font400">
              视频
            </p>
          </van-uploader>
        </div>
        <div class="sendBox_item">
          <van-uploader
            :after-read="afterReadFile"
            accept="*"
          >
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-wenjian" />
            </svg>
            <p class="content3 color3 font400">
              文件
            </p>
          </van-uploader>
        </div>
        <div class="sendBox_item">
          <van-uploader :after-read="afterRead">
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-paizhao" />
            </svg>
            <p class="content3 color3 font400">
              拍照
            </p>
          </van-uploader>
        </div>
      </div>
      <div class="Scan">
        <van-field
          v-model="content"
          type="textarea"
          :autosize="{ minHeight: 120 }"
          placeholder="请输入申请提示内容"
        />
      </div>
      <div class="sendBoxFooter flex justify_between align_center">
        <div
          @click="cancle"
          class="sendBoxFooter_item cancle font400 content3 color4"
        >
          取消
        </div>
        <div
          @click="release"
          class="sendBoxFooter_item send font400 content3 color4"
        >
          发布
        </div>
      </div>
    </div>
  </van-popup>
  <!-- 对接人弹窗 -->
  <van-dialog
    v-model:show="DockingDialog"
    :title="`共有${list.length}人对接`"
    confirm-button-color="#FF7A1F"
    confirm-button-text="确定"
    width="344"
  >
    <div class="demandDetails dockingDialog">
      <div
        class="docking"
        v-for="(item,index) in list"
        :key="index"
      >
        <div class="dockingBox flex align_center justify_between">
          <div class="docking_left">
            <div class="flex align_center">
              <div v-if="item.head_img">
                <img :src="item.head_img">
              </div>
              <div>
                <p class="contenr3 fontBold color1">
                  {{ item.username }}
                </p>
                <p class="content3 font400 color3">
                  {{ item.company }}
                </p>
              </div>
            </div>
          </div>
          <div
            class="docking_lright"
            @click="phone(item.phone)"
            v-if="item.is_friend === 1"
          >
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-dianhua" />
            </svg>
          </div>
          <div
            class="docking_lright"
            v-if="item.is_friend === 0"
            @click="addUser(item.id)"
          >
            <svg
              class="icon"
              aria-hidden="true"
            >
              <use xlink:href="#icon-jiaohuanmingpian" />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </van-dialog>
  <!-- 选择需求解决人 -->
  <van-dialog
    v-model:show="solve"
    title="请选择需求解决人"
    show-cancel-button
    confirm-button-color="#FF7A1F"
    confirm-button-text="确定"
    width="344"
    @confirm="confirmClose"
  >
    <div class="solveBox">
      <div class="demandDetails dockingDialog">
        <div
          class="docking"
          :class="checkDockingIndex == index ? 'checkDockingActive' : ''"
          v-for="(item,index) in list"
          :key="index"
          @click="checkDockingUser(item.id, index)"
        >
          <div class="dockingBox flex align_center justify_between">
            <div class="docking_left">
              <div class="flex align_center">
                <div v-if="item.head_img">
                  <img :src="item.head_img">
                </div>
                <div>
                  <p class="contenr3 fontBold color1">
                    {{ item.username }}
                  </p>
                  <p class="content3 font400 color3">
                    {{ item.company }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="other flex align_center justify_between"
        :class="checkDockingIndex == 303 ? 'checkDockingActive' : ''"
        @click="checkDockingUser(0,303)"
      >
        <div class="color1 content3 fontBold">
          通过其他渠道解决
        </div>
      <!-- <van-checkbox
        v-model="checked"
        shape="square"
        checked-color="#FF7A1F"
      /> -->
      <!-- <van-radio-group v-model="checked">
        <van-radio
          name="1"
          shape="square"
          checked-color="#FF7A1F"
        />
      </van-radio-group>-->
      </div>
    </div>
  </van-dialog>
  <!-- 需求状态 -->
  <van-row
    class="bottom"
    v-if="data.status == 3 || data.status == 2"
    style="padding: 0; display: block"
  >
    <div class="demand-type-state disabled">
      <h4>该需求已结束/过期</h4>
    </div>
    <van-button
      square
      @click="back"
      block
    >
      返回
    </van-button>
  </van-row>
  <van-row
    v-if="data.status == 0"
    class="bottom"
    style="padding: 0; display: block"
  >
    <div class="demand-type-state info">
      <h4>您的需求正在审核</h4>
      <p class="dianhua_ico">
        <i class="iconfont icondianhua1" />电话联系小秘书
      </p>
    </div>
    <van-button
      square
      @click="back"
      block
    >
      返回
    </van-button>
  </van-row>

  <van-row
    v-if="data.status == -1"
    class="bottom"
    style="padding: 0; display: block"
  >
    <div class="demand-type-state error">
      <h4>您的需求未能通过审核</h4>
      <p>请确保需求真实且描述清晰</p>
      <p>
        <span>如需更多帮助请联系</span>
        <span>18124116589</span>
      </p>
    </div>
    <van-button
      square
      @click="back"
      block
    >
      返回
    </van-button>
  </van-row>
  <Loading
    :visible="visible"
    :share-img="shareImg"
    @closeLoading="closeLoading"
  />
</template>

<script setup lang="ts">
import axios from 'axios'
import { getToken } from '@/service/cookie'
import { Dialog, Toast, ImagePreview } from 'vant'
import { ref, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { demandDetail, replyUserList, replyList, demandDocking, reply, demandEnd, exchange, deamndShare } from '@/api/index'
const Loading = defineAsyncComponent(() => import('@/components/Loading/index.vue'))
const router = useRouter()
const route = useRoute()
const store = useStore()
const show: any = ref(false)
const showPopup: any = ref(false)
const DockingDialog: any = ref(false)
const solve: any = ref(false)
const content: any = ref('')
// const checked: any = ref(false)
const data: any = ref([])
const list: any = ref([])
const replyListData: any = ref([])
const file: any = ref('')
const fileName: any = ref('')
const fileType: any = ref(1)
const replyId: any = ref('')
const checkDockingIndex: any = ref('-1')
const checkDockingId: any = ref('')
const visible: any = ref(false)
const shareImg: any = ref('')

const getData = async () => {
  try {
    data.value = await demandDetail({ demand_id: route.query.id })
    if (getToken('userId')) {
      replyListData.value = await replyList({ demand_id: route.query.id })
    }
    if (data.value.is_publisher === 1) {
      list.value = await replyUserList({ demand_id: route.query.id })
    }
  } catch (error:any) {
    Dialog.alert({
      title: '温馨提示',
      message: error.message,
      confirmButtonColor: '#FF7A1F',
      confirmButtonText: '返回首页'
    }).then(() => {
      // on close
      router.replace('/demand')
    })
  }
}
getData()

const editDemand = async () => {
  if (data.value.status > 1) {
    Toast('需求已结束或已过期')
  } else {
    router.push({ path: '/demand/create', query: { id: data.value.id } })
  }
}

const complaint = async () => {
  router.push({ path: '/demand/complaint', query: { id: route.query.id } })
}

// 预览图片
const previewImg = async (index:any) => {
  ImagePreview({
    images: data.value.morepic,
    startPosition: index,
    closeable: true,
    onClose () {
      // do something
      console.log('close image preview')
    }
  })
}

const addUser = async (id: any) => {
  try {
    await exchange({ user_id: id })
    Dialog.alert({
      message: '您的交换名片申请已提交，请耐心等待用户审核',
      confirmButtonColor: '#FF7A1F'
    }).then(() => {
      // on close
    })
  } catch (error: any) {
    Toast(error.message)
  }
}

const closeLoading = async () => {
  visible.value = false
}

const geturl = async (index:any) => {
  Dialog.confirm({
    title: '温馨提示',
    message: '您即将前往该文件的下载页面，是否继续?',
    confirmButtonText: '继续',
    cancelButtonText: '稍后再说'
  })
    .then(() => {
      window.location.href = replyListData.value[index].file
    })
    .catch(() => {
      // on cancel
      console.log('cancel dialog')
    })
}

const getHfurl = async (index:any) => {
  console.log(replyListData.value[index])
  const images = [replyListData.value[index].file]
  ImagePreview({
    images,
    startPosition: index,
    closeable: true,
    onClose () {
      // do something
      console.log('close image preview')
    }
  })
}

const getHfurl2 = async (index:any, r:any) => {
  const images = [replyListData.value[index].reply[r].file]
  ImagePreview({
    images,
    startPosition: index,
    closeable: true,
    onClose () {
      // do something
      console.log('close image preview')
    }
  })
}

const back = () => {
  console.log(store.state.from.path)
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const submit = async () => {
  await store.dispatch('fetchUserInfo')
  if (data.value.is_docking === 0) {
    Toast('您的申请正在审核')
  } else {
    if (store.state.userInfo.is_vip) {
      show.value = true
    } else {
      Dialog.confirm({
        title: '温馨提示',
        message: '房协会员专属权限，快去申请入会吧',
        confirmButtonText: '去入会',
        cancelButtonText: '暂不入会'
      })
        .then(() => {
          router.replace('/userCenter')
        })
    }
  }
}

const leaving = () => {
  showPopup.value = true
}

const solveClick = () => {
  if (data.value.status > 1) {
    Toast('需求已结束或已过期')
  } else {
    solve.value = true
  }
}

const share = async () => {
  try {
    visible.value = true
    await deamndShare({ demand_id: route.query.id, web_url: encodeURIComponent(window.location.href) })
    shareImg.value = `${import.meta.env.VITE_API_BASEURL}v1/demand/share?demand_id=${route.query.id}&web_url=${encodeURIComponent(window.location.href)}`
  } catch (error: any) {
    Toast(error.message)
  }
}

const userReply = (id: any) => {
  replyId.value = id
  if (data.value.is_publisher === 1) {
    showPopup.value = true
  } else {
    if (data.value.is_docking === 1) {
      showPopup.value = true
    } else {
      show.value = true
    }
  }
}

const confirmClose = async () => {
  try {
    await demandEnd({ demand_id: route.query.id, solve_id: checkDockingId.value ? checkDockingId.value : 0 })
    getData()
    Toast('结束成功')
  } catch (error: any) {
    Toast(error.message)
  }
  // if (checked.value === true && checkDockingId.value) {
  //   Toast('不能选择两种方式结束需求')
  // }
}

const path = (id: any) => {
  console.log(111)
}

// 发布留言
const release = async () => {
  try {
    await reply({ demand_id: route.query.id, content: content.value, reply_id: replyId.value ? replyId.value : 0, file: file.value, type: fileType.value, file_name: fileName.value })
    getData()
    showPopup.value = false
    replyId.value = ''
    content.value = ''
    file.value = ''
    fileName.value = ''
  } catch (error: any) {
    Toast(error.message)
  }
}

const phone = (i: any) => {
  window.location.href = 'tel://' + i
}

const cancle = () => {
  showPopup.value = false
  replyId.value = ''
}

const checkDockingUser = (id: any, index: any) => {
  console.log(id)
  checkDockingIndex.value = index
  checkDockingId.value = id
}

const afterRead = async (file: any) => {
  const formData = new FormData()
  formData.append('file', file.file)
  fileType.value = 2
  await uploadFile(formData)
  await release()
}

const afterReadVideo = async (file: any) => {
  const formData = new FormData()
  formData.append('file', file.file)
  fileType.value = 3
  await uploadFile(formData)
  await release()
}

const afterReadFile = async (file: any) => {
  const formData = new FormData()
  formData.append('file', file.file)
  fileType.value = 4
  await uploadFile(formData)
  await release()
}

const uploadFile = async (formData: any) => {
  return axios({
    method: 'post',
    url: import.meta.env.VITE_API_BASEURL + 'v1/common/upload',
    data: formData,
    headers: { 'Content-Type': 'multipart/form-data', authorization: getToken('token') }
  }).then((res: any) => {
    file.value = res.data.data.url
    fileName.value = res.data.data.name
    // form.value.morepic.push(res.data.data.url)
  })
}

const confirm = async () => {
  try {
    if (data.value.is_docking === 0) {
      Dialog.alert({
        message: '你的申请已提交，请耐心等待平台审核',
        confirmButtonColor: '#FF7A1F'
      }).then(() => {
        // on close
        getData()
      })
    } else {
      await demandDocking({ demand_id: route.query.id, content: content.value })
      Dialog.alert({
        message: '您的申请已提交，请耐心等待平台审核',
        confirmButtonColor: '#FF7A1F'
      }).then(() => {
        // on close
        getData()
      })
    }
  } catch (error: any) {
    Toast(error.message)
  }
}

</script>

<style lang="less" scoped>
.solveBox{
  height:200px;
  overflow: auto;
}
.demandDetails {
  padding: 15px 15px 80px;
  .demandDetailsBox {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    .demandDetailsHead {
      padding: 15px;
              .you{
          width: 18px;
          height: 18px;
          background: #FF2F1F;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 19px;
          display: inline-block;
          text-align: center;
          margin-right:4px;
        }
      .newsT{
        margin-top:5px;
        span:first-child{
          color: #FF7A1F;
          font-size:13px;
        }
      }
      .tagleft {
        margin-right: 5px;
      }
    }
    .demandDetailsBoxText {
      margin:10px 0 15px;
    }
    .demandDetailsBoxImg {
      margin-bottom: 20px;
      img {
        width: 72px;
        height: 72px;
        background: #ffffff;
        border-radius: 5px;
        margin-right: 10px;
        object-fit: cover;
      }
    }
  }
  .docking {
    width: 100%;
    height: 83px;
    background: #ffffff;
    border-radius: 10px;
    margin: 15px 0;
    .dockingBox {
      padding: 15px;
      .docking_left {
        img {
          width: 52px;
          height: 52px;
          border-radius: 5px;
          object-fit: cover;
          margin-right: 15px;
        }
        p {
          width: 194px;
        }
        p:last-child {
          margin-top: 10px;
        }
      }
      .docking_lright {
        .icon {
          width: 25px;
          height: 25px;
        }
      }
    }
  }
  .docking_user {
    margin: 20px 0;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    .docking_item {
      display: flex;
      align-items: flex-start;
      p {
        // margin-bottom: 18px;
      }
      .docking_img {
        width: 38px;
        height: 38px;
        img {
          width: 38px;
          height: 38px;
          object-fit: cover;
          border-radius: 5px;
        }
      }
    }
    .docking_info {
      width: 100%;
      margin-left: 10px;
      .name {
        margin-bottom: 10px;
      }
      .desc {
        width: 100%;
        word-break: break-word;
        margin: 15px 0;
      }
      .upload_img {
        width: 238px;
        height: 150px;
        object-fit: cover;
      }
      .time {
      }
      .file {
        height: 62px;
        background: #f6f6f6;
        border-radius: 5px;
        position: relative;
        margin-bottom: 10px;
        span {
          padding-left: 15px;
          position: relative;
          top: 10px;
          display: inline-block;
          width: 160px;
          word-break: break-all;
        }
        .iconfont {
          font-size: 29px;
          position: absolute;
          right: 13px;
          top: 50%;
          color: #d9d9d9;
          transform: translateY(-50%);
        }
      }
      .fileItem {
        margin:10px 0;
        img {
          width: 180px;
          height: 120px;
          object-fit: cover;
        }
        .video {
          width: 100%;
        }
      }
      .reply {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .reply_text {
          font-size: 14px;
          font-weight: 400;
          color: #ff7a1f;
        }
        .reply_icon {
          display: inline-block;
          vertical-align: middle;
          margin-right: 2px;
          font-size: 17px;
          color: #ff7a1f;
        }
      }
      .tisp {
        width: 190px;
        height: 22px;
        background: #fff3f3;
        border: 1px solid #f5dddd;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 300;
        color: #d00000;
        line-height: 22px;
        text-align: center;
      }
    }
    .reply_info {
      width: 100%;
      background: #f7f7f7;
      border-radius: 5px;
      margin-bottom: 10px;
      margin-top: 17px;
      .reply_info_item {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        img {
          width: 36px;
          height: 36px;
          border-radius: 5px;
          object-fit: cover;
        }
      }
      .reply_info_item_head {
        width: 100%;
        display: flex;
        .left {
          margin-left: 10px;
          width: 100%;
        }
        .name {
          // margin-right: 5px;
        }
        .desc {
          word-break: break-word;
          margin-bottom: 10px;
        }
        .time {
          margin-bottom: 0;
        }
      }
    }
  }
  .publisher {
    background-color: #fff;
    padding: 15px 30px;
    text-align: center;
    .icon {
      width: 29px;
      height: 29px;
      margin-bottom: 8px;
    }
  }
}
.checkDockingActive {
  background: #ff7a1f !important;
  p,div {
    color: #fff  !important;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 189px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}
.complaint {
  position: fixed;
  top: 10%;
  right: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(167, 167, 167, 0.29);
  border-radius: 5px 0px 0px 5px;
  text-align: center;
  .icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 5px;
  }
}
.Scan {
  margin: 20px 15px;
  border-radius: 5px;
}
.sendBox {
  padding: 20px 30px;
  .sendBox_item {
    text-align: center;
    .icon {
      width: 35px;
      height: 35px;
      margin: 0 auto 4px;
    }
  }
  .Scan {
    margin: 15px 0 20px 0;
  }
  .send {
    width: 140px;
    height: 44px;
    background: #ff7a1f;
    border-radius: 5px;
    text-align: center;
    line-height: 44px;
  }
  .cancle {
    width: 140px;
    height: 44px;
    background: #85898c;
    border-radius: 5px;
    text-align: center;
    line-height: 44px;
  }
}

.dockingDialog {
  padding: 0 10px;
  .docking {
    background: #f7f7f7;
    padding: 0 10px;
    width: auto;
    .dockingBox {
      padding: 0;
      height: 100%;
    }
  }
}
.other {
  // width: 270px;
  height: 55px;
  background: #f7f7f7;
  border-radius: 10px;
  margin: 0 10px;
  div{
    padding-left:15px;
  }
  // padding: 0 10px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 22;
}
.demand-type-state {
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;

  h4,
  p {
    margin: 0;
    line-height: 1.75em;
  }

  h4 {
    font-size: 15px;
  }

  p {
    font-size: 13px;
    opacity: 0.75;
  }

  &.disabled {
    background: linear-gradient(to right, #aaaaaa, #dddddd);
  }
  &.info {
    background: linear-gradient(to right, #0098de, #2ec5d2);
  }
  &.error {
    background: linear-gradient(to right, #c11823, #e63e22);
  }
  &.warning {
    background: linear-gradient(to right, #ff6e1d, #ff8f50);
  }
  &.success {
    background: linear-gradient(to right, #19a357, #00c08b);
  }
}
@media (min-width: 750px) {
.solveBox{
  height:200px;
  overflow: auto;
}
.demandDetails {
  padding: 15px 15px 80px;
  .demandDetailsBox {
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    .demandDetailsHead {
      padding: 15px;
              .you{
          width: 18px;
          height: 18px;
          background: #FF2F1F;
          border-radius: 2px 2px 2px 2px;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 19px;
          display: inline-block;
          text-align: center;
          margin-right:4px;
        }
      .newsT{
        margin-top:5px;
        span:first-child{
          color: #FF7A1F;
          font-size:13px;
        }
      }
      .tagleft {
        margin-right: 5px;
      }
    }
    .demandDetailsBoxText {
      margin:10px 0 15px;
    }
    .demandDetailsBoxImg {
      margin-bottom: 20px;
      img {
        width: 72px;
        height: 72px;
        background: #ffffff;
        border-radius: 5px;
        margin-right: 10px;
        object-fit: cover;
      }
    }
  }
  .docking {
    width: 100%;
    height: 83px;
    background: #ffffff;
    border-radius: 10px;
    margin: 15px 0;
    .dockingBox {
      padding: 15px;
      .docking_left {
        img {
          width: 52px;
          height: 52px;
          border-radius: 5px;
          object-fit: cover;
          margin-right: 15px;
        }
        p {
          width: 194px;
        }
        p:last-child {
          margin-top: 10px;
        }
      }
      .docking_lright {
        .icon {
          width: 25px;
          height: 25px;
        }
      }
    }
  }
  .docking_user {
    margin: 20px 0;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    .docking_item {
      display: flex;
      align-items: flex-start;
      p {
        // margin-bottom: 18px;
      }
      .docking_img {
        width: 38px;
        height: 38px;
        img {
          width: 38px;
          height: 38px;
          object-fit: cover;
          border-radius: 5px;
        }
      }
    }
    .docking_info {
      width: 100%;
      margin-left: 10px;
      .name {
        margin-bottom: 10px;
      }
      .desc {
        width: 100%;
        word-break: break-word;
        margin: 15px 0;
      }
      .upload_img {
        width: 238px;
        height: 150px;
        object-fit: cover;
      }
      .time {
      }
      .file {
        height: 62px;
        background: #f6f6f6;
        border-radius: 5px;
        position: relative;
        margin-bottom: 10px;
        span {
          padding-left: 15px;
          position: relative;
          top: 10px;
          display: inline-block;
          width: 160px;
          word-break: break-all;
        }
        .iconfont {
          font-size: 29px;
          position: absolute;
          right: 13px;
          top: 50%;
          color: #d9d9d9;
          transform: translateY(-50%);
        }
      }
      .fileItem {
        margin:10px 0;
        img {
          width: 180px;
          height: 120px;
          object-fit: cover;
        }
        .video {
          width: 100%;
        }
      }
      .reply {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .reply_text {
          font-size: 14px;
          font-weight: 400;
          color: #ff7a1f;
        }
        .reply_icon {
          display: inline-block;
          vertical-align: middle;
          margin-right: 2px;
          font-size: 17px;
          color: #ff7a1f;
        }
      }
      .tisp {
        width: 190px;
        height: 22px;
        background: #fff3f3;
        border: 1px solid #f5dddd;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 300;
        color: #d00000;
        line-height: 22px;
        text-align: center;
      }
    }
    .reply_info {
      width: 100%;
      background: #f7f7f7;
      border-radius: 5px;
      margin-bottom: 10px;
      margin-top: 17px;
      .reply_info_item {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        img {
          width: 36px;
          height: 36px;
          border-radius: 5px;
          object-fit: cover;
        }
      }
      .reply_info_item_head {
        width: 100%;
        display: flex;
        .left {
          margin-left: 10px;
          width: 100%;
        }
        .name {
          // margin-right: 5px;
        }
        .desc {
          word-break: break-word;
          margin-bottom: 10px;
        }
        .time {
          margin-bottom: 0;
        }
      }
    }
  }
  .publisher {
    background-color: #fff;
    padding: 15px 30px;
    text-align: center;
    .icon {
      width: 29px;
      height: 29px;
      margin-bottom: 8px;
    }
  }
}
.checkDockingActive {
  background: #ff7a1f !important;
  p,div {
    color: #fff  !important;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 375px;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 189px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}
.complaint {
  position: fixed;
  top: 10%;
  right: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(167, 167, 167, 0.29);
  border-radius: 5px 0px 0px 5px;
  text-align: center;
  .icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 5px;
  }
}
.Scan {
  margin: 20px 15px;
  border-radius: 5px;
}
.sendBox {
  padding: 20px 30px;
  .sendBox_item {
    text-align: center;
    .icon {
      width: 35px;
      height: 35px;
      margin: 0 auto 4px;
    }
  }
  .Scan {
    margin: 15px 0 20px 0;
  }
  .send {
    width: 140px;
    height: 44px;
    background: #ff7a1f;
    border-radius: 5px;
    text-align: center;
    line-height: 44px;
  }
  .cancle {
    width: 140px;
    height: 44px;
    background: #85898c;
    border-radius: 5px;
    text-align: center;
    line-height: 44px;
  }
}

.dockingDialog {
  padding: 0 10px;
  .docking {
    background: #f7f7f7;
    padding: 0 10px;
    width: auto;
    .dockingBox {
      padding: 0;
      height: 100%;
    }
  }
}
.other {
  // width: 270px;
  height: 55px;
  background: #f7f7f7;
  border-radius: 10px;
  margin: 0 10px;
  div{
    padding-left:15px;
  }
  // padding: 0 10px;
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 375px;
  background-color: #fff;
  z-index: 22;
}
.demand-type-state {
  min-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10px 15px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;

  h4,
  p {
    margin: 0;
    line-height: 1.75em;
  }

  h4 {
    font-size: 15px;
  }

  p {
    font-size: 13px;
    opacity: 0.75;
  }

  &.disabled {
    background: linear-gradient(to right, #aaaaaa, #dddddd);
  }
  &.info {
    background: linear-gradient(to right, #0098de, #2ec5d2);
  }
  &.error {
    background: linear-gradient(to right, #c11823, #e63e22);
  }
  &.warning {
    background: linear-gradient(to right, #ff6e1d, #ff8f50);
  }
  &.success {
    background: linear-gradient(to right, #19a357, #00c08b);
  }
}
}
</style>
